<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        {{ pageTitle }}
        <span class="text-subtitle1">列表</span>
      </div>
      <q-space></q-space>
      <search-bar-toggle-btn v-model="searchBarVisibility"></search-bar-toggle-btn>
    </div>
    <div v-show="searchBarVisibility" class="q-pa-sm shadow-2 q-mb-md items-center">
      <div class="row q-col-gutter-sm">
        <div class="col-xs-12 col-sm-6 col-md-5 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">订单ID</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.orderId" select-all-on-focus @keyup.enter="loadListData(2)"
              :readonly="listDataLoadingState"/>
          </div>
        </div>
        <div>
          <q-btn :disable="listDataLoadingState" color="primary" icon="search" label="查询" @click="loadListData(2)" />
        </div>
      </div>
    </div>
    <div class="shadow-2">
      <q-table v-model:pagination="fpsInfo.paginationInfo" :columns="fpsInfo.columnsInfo" :hide-pagination="true"
        :loading="listDataLoadingState" :rows="$d.tableData"
        :visible-columns="fpsInfo.visibleColumns" binary-state-sort
        class="generic-sticky-header-table"
        color="primary" dense flat row-key="orderId" separator="cell" @request="fpsAssist.onDataTableRequest"
        @row-dblclick="(evt, row) => {fpsNav.gotoDetail(row.orderId)}">
        <template v-slot:top="props">
          <q-space />
          <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
            v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
            @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
          <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" :ripple="false"
            :title="props.inFullscreen ? '退出全屏' : '全屏显示'" dense flat @click="props.toggleFullscreen" />
        </template>
        <template v-slot:no-data>
          <div class="full-width items-center justify-center row">
            <q-icon name="error_outline" />
            无数据
            <q-btn :disable="listDataLoadingState" :loading="listDataLoadingState" class="q-ml-sm" dense
              flat icon="refresh" size="sm" title="刷新" @click="loadListData"></q-btn>
          </div>
        </template>
        <template v-slot:body-cell-operation="props">
          <q-td :props="props" auto-width>
            <q-btn class="q-mr-xs btn-in-row" color="primary" dense label="查看"
              @click="evt=> fpsNav.gotoDetail(props.row.orderId, evt)" />
          </q-td>
        </template>
        <!-- 底部分页条 -->
        <template v-slot:bottom>
          <paging-bar :loading-state="listDataLoadingState" :pageNo="fpsReq.pageNo" :pageSize="fpsReq.pageSize"
            :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
            @go-to-page="fpsNav.gotoPage" />
        </template>
      </q-table>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'LineFpsHelperListDemo'
}
</script>

<script lang="ts" setup>

import {reactive, ref} from 'vue'
import {useFpsHelper} from 'src/lib/hooks/fpsHelper'
import {ColumnInfo, FpsReq, FpsResp} from 'src/lib/defs/comm'
import {useTitleHelper} from 'src/lib/hooks/titleHelper'
import EasyInput from 'src/lib/components/EasyInput.vue'

const pageTitle = '分页demo'
useTitleHelper(pageTitle)

interface GetMyOrderReq extends FpsReq{
  orderId: number | null
}

interface GetMyOrderResp extends FpsResp {
  orderId: number | null
  myOrderInfos: MyOrderInfo[]
}

interface MyOrderInfo {
  orderId: number
  orderNo: string
  orderDt: string
  orderPrice: number
  customerName: string
  address: string
  description: string
}

const $d= reactive({
  tableData : [] as MyOrderInfo[]
})

let fpsReq: GetMyOrderReq = reactive({
  pageNo: 1,
  pageSize: 10,
  orderId: null,
  orderBy: null,
  isDescending: false
})

const columnsDefine: ColumnInfo[] = [
  {
    label: '操作',
    name: 'operation',
    field: 'operation',
    align: 'left',
    defOrder: 0,
    sortable: false,
    defVisible: true
  },
  {
    label: '序号',
    name: 'orderId',
    field: 'orderId',
    align: 'left',
    defOrder: 1,
    sortable: false,
    defVisible: true
  },
  {
    label: '订单号',
    name: 'orderNo',
    field: 'orderNo',
    align: 'left',
    defOrder: 2,
    sortable: false,
    defVisible: true
  },
  {
    label: '订单日期',
    name: 'orderDt',
    field: 'orderDt',
    align: 'left',
    defOrder: 3,
    sortable: false,
    defVisible: true,
    format: (val: string) => $f.fmt.dtFmtDateOnly(val)
  },
  {
    label: '订单总额',
    name: 'orderPrice',
    field: 'orderPrice',
    align: 'left',
    defOrder: 4,
    sortable: false,
    defVisible: true
  },
  {
    label: '客户名称',
    name: 'customerName',
    field: 'customerName',
    align: 'left',
    defOrder: 5,
    sortable: false,
    defVisible: true
  },
  {
    label: '收货地址',
    name: 'address',
    field: 'address',
    align: 'left',
    defOrder: 6,
    sortable: false,
    defVisible: true
  },
  {
    label: '描述',
    name: 'description',
    field: 'description',
    align: 'left',
    defOrder: 7,
    sortable: false,
    defVisible: true
  },

]
let listDataLoadingState = ref(false)

const loadListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      fpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      fpsReq.orderBy = ''
      fpsReq.isDescending = false
    }
  }
  listDataLoadingState.value = true
  $f.axios.get<GetMyOrderResp>('/misc-test/get-myorder', {params: fpsReq})
    .then(result => {
      fpsAssist.handleGenericFpsResp(result.data)
      $d.tableData = result.data.myOrderInfos
      fpsAssist.saveFpsReq(fpsReq)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      listDataLoadingState.value = false
    })
}

// FPS配置
const {
  fpsInfo,
  fpsAssist,
  fpsNav,
  searchBarVisibility
} = useFpsHelper('/demo/line-fps-helper-demo',
  '/demo/line-fps-helper-demo/detail',
  null,
  null,
  fpsReq, columnsDefine,
  null,
  loadListData)

</script>

<style scoped>

</style>
